<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="keywords" content=" empty demo page" />
    <title>Empty Demo Page | SAP Fundamentals</title>
    <link
      href="/vendor/fundamental-styles/dist/fundamental-styles.css"
      rel="stylesheet"
    />
    <link href="../../../styles/styles.css" rel="stylesheet" />
    <script src="/vendor/luigi-client/luigi-client.js"></script>
  </head>

  <body>
    <div>
      <div class="fd-page">
        <header class="fd-page__header">
          <div class="fd-action-bar">
            <div class="fd-action-bar__header">
              <h3 class="fd-action-bar__title">
                Empty Page
              </h3>
            </div>
            <p class="fd-action-bar__description">
              Optional page intro lorem ipsum dolor
            </p>
          </div>
        </header>

        <div class="fd-page__content">
          <section class="fd-section">
            <p class="fd-has-text-align-center fd-has-font-style-italic">
              <strong>There are no items on this page.</strong>
            </p>
            <p class="fd-has-text-align-center">
              <button class="fd-button">
                <span class="fd-button__text">Add New Item</span>
                <i class="sap-icon--add"></i>
              </button>
            </p>
          </section>
        </div>
      </div>
    </div>
    <script type="module">
      import setTheme from '../../../themeHelper.js';
      function updateFn() {
        setTheme();
      }

      LuigiClient.addInitListener(updateFn);
      LuigiClient.addContextUpdateListener(updateFn);
    </script>
    <script type="text/javascript">
      (function() {
        //dropdown
        var els = document.querySelectorAll('[aria-controls]');
        for (var i = 0; i < els.length; i++) {
          var el = els[i];
          el.addEventListener('click', function(e) {
            var targetId = this.getAttribute('aria-controls');
            var target = document.getElementById(targetId);
            //alert
            var isAlert = this.parentElement.getAttribute('role') === 'alert';
            if (isAlert) {
              //remove or hide if we want some animation
              // target.setAttribute("aria-hidden", true);
              target.remove();
              return;
            }
            //dropdown
            var isDropdown = this.getAttribute('aria-haspopup') === 'true';
            if (isDropdown) {
              //trigger
              var isExpanded = this.getAttribute('aria-expanded') === 'true';
              this.setAttribute('aria-expanded', !isExpanded);
              //target
              var targetIsHidden = target.getAttribute('aria-hidden') == 'true';
              target.setAttribute('aria-hidden', isExpanded);
              return;
            }
            //tree
            var isTree = target.getAttribute('role') === 'tree';
            var isTreeItem = target.getAttribute('role') === 'treeitem';
            function setPressed(el, bool) {
              el.setAttribute('aria-pressed', bool);
              if (bool) {
                el.classList.add('is-pressed');
              } else {
                el.classList.remove('is-pressed');
              }
            }
            function setExpanded(el, bool) {
              el.setAttribute('aria-expanded', bool);
              //get group
              var group = el.querySelector('[role=group]');
              group.setAttribute('aria-hidden', !bool);
              if (!bool) {
                group.classList.add('is-hidden');
              } else {
                group.classList.remove('is-hidden');
              }
            }
            var isPressed;
            //handle the primary trigger
            if (isTree || isTreeItem) {
              isPressed = this.getAttribute('aria-pressed') === 'true';
              setPressed(this, !isPressed);
            }
            //toggle a single treeitem
            if (isTreeItem) {
              setExpanded(target, !isPressed);
            }
            //toggle all treeitems
            if (isTree) {
              //all triggers
              var controls = target.querySelectorAll('[aria-controls]');
              for (var i = 0; i < controls.length; i++) {
                var control = controls[i];
                setPressed(control, !isPressed);
                targetId = control.getAttribute('aria-controls');
                target = document.getElementById(targetId);
                setExpanded(target, !isPressed);
              }
            }
          });
        }
      })();
    </script>
  </body>
</html>
